<template>
  <div class="container">
   

    <div class="topbar">
        <div class="topbar-left" @click="onClickLeft()">返回</div>
        <div class="topbar-text">详情页面</div>
        <div class="topbar-right"></div>
    </div>
    
    <van-swipe @change="onChange">
        <van-swipe-item class="swiper-slide" v-for="(item,index) in banners" :key="index">
            <img :src="item.img"/>
        </van-swipe-item>
        
        <template #indicator>
            <div class="custom-indicator">
            {{ current + 1 }}&nbsp;<span>/&nbsp;2</span>
            </div>
        </template>
    </van-swipe>

    <div class="detail-price">
        <div class="price">￥199</div>
        <div class="CollectionToShare">
            <div class="Collection">
                <span class="iconfont icon-shoucang"></span>
                <span class="text">收藏</span>
            </div>
            <div class="ToShare">
                <span class="iconfont icon-fenxiang"></span>
                <span class="text">分享</span>
            </div>
        </div>
    </div>

    <div class="GoodsDetails">{{product.subtitle}}</div>

    <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" dot @click="OCservice()"/>
        <van-goods-action-icon icon="shop-o" text="进店" badge="12" @click="IntoTheShop()"/>
        <van-goods-action-icon icon="cart-o" text="购物车" badge="5" @click="gotoCate()"/>
        <van-goods-action-button type="warning" text="加入购物车" @click="Addtocart()"/>
        <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>
<script>
    export default {
        name: 'detail',
        components: { 
        },
        computed: { 
        },
        data() {
            return {
                product:{},//商品信息
                id:this.$route.params.id,//获取商品ID
                current: 0,
                banners: [ 
                        {
                            id:0,
                            img:'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg'
                        },{
                            id:1,
                            img:'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
                        }
                ],
                swiperOption: {
                    // 参数选项,显示小点
                    pagination: {
                        el: '.swiper-pagination',
                        // bulletClass: 'my-bullet',
                        // bulletActiveClass: 'my-bullet-active'
                    },
                    //循环
                    loop:true,
                    //每张播放时长3秒，自动播放
                    autoplay:true,
                    //滑动速度
                    speed:500,
                    // delay:1000
                }
            }
        },
        mounted() {
            this.getProductInfo()
        },
        methods: {
            getProductInfo(){
                this.axios.get(`/products/${this.id}`).then((res)=>{
                    this.product = res;
                    console.log(res)
                })
            },
            onClickLeft(){
                this.$router.go(-1)
            },
            
            onChange(index) {
                this.current = index;
            },
            //在线客服
            OCservice(){

            },
            //进店
            IntoTheShop(){

            },
            //进入购物车
            gotoCate(){

            },
            //加入购物车
            Addtocart(){

            } 
            
        }
    }
</script>

<style lang="scss" scoped>

    .container{
  
        .topbar{
            width:100vw;
            height:7vh;
            line-height:7vh;
            font-size:0.9rem;
            background:rgba(255,255,255,1);
            color:#333;
            position:fixed;
            left:0;
            top:0;
            z-index:100;
            display:flex;
            .topbar-left{
                flex:1;
                text-align:center;
            }
            .topbar-text{
                flex:4;
                text-align:center;
            }
            .topbar-right{
                flex:1;
                text-align:center;
            }
        }
        
        
        .swiper-slide{
            width:100vw;
            height:auto;
            img{
                width:100vw;
            }
        }
        .custom-indicator {
            position: absolute;
            right: 0vw;
            bottom: 3vh;
            padding: 2px 5px;
            font-size: 0.8rem;
            background: rgba(0, 0, 0, 0.3);
            color:#fff;
            width:12vw;
            border-radius:1rem 0 0 1rem;
            text-align:center;
            span{
                font-size:0.5rem;
                width:1rem
            }
        }
        .detail-price{
            padding:0 1rem;
            box-sizing:border-box;
            position:relative;
            width:100vw;
            height:8vh;
            line-height:8vh;
            display:flex;
            justify-content:space-between;
            .price{
                color:#f20;
                font-weight:600;
            }
            .CollectionToShare{
                
                color:#666;
                text-align:center;
                display:flex;
                justify-content:space-between;
                width:30vw;
                height:8vh;
                
                .Collection,.ToShare {
                    width:15vw;
                    height:8vh;
                    font-size:0.7rem;
                    display:flex;
                    justify-content:space-between;
                    flex-direction:column;
                    .iconfont{
                        line-height:3vh;
                        font-size:0.8rem;
                        margin-top:1vh;
                    }
                    .text{
                        line-height:3vh;
                        margin-bottom:1vh;
                    }
                }
                
               
            }
            
        }
        .GoodsDetails{
            font-size: 0.8rem;
            padding:0 1rem;
            box-sizing:border-box;
        }
    }
    
</style>
